<!-- 历史申请记录 -->
<template>
  <section class="content" id="mhmContent">
    <!-- 表格区 -->
    <div class="table">
      <lq-table ref="historyRegiRecordTableRef"
                :columns="columns"
                :records="mhmTableData.records"
                size="default"
                :border="true"
                :stripe="true"
      >
        <template #name="scope">
          <el-link type="primary" @click="() => {}">{{scope.row.name}}</el-link>
        </template>
      </lq-table>
    </div>
    <br>
    <!-- 查看模态框 -->
    <el-dialog v-model="dialog.visible" v-bind="{...dialog.innerAttrs}" v-on="dialog.events">
      <el-row>
        <el-col :span="24">
            魂牵梦萦
        </el-col>
      </el-row>
    </el-dialog>
  </section>
</template>

<script setup lang="ts">
/**
 * 全局方法引入
 */
const global = getCurrentInstance().appContext.config.globalProperties;

import {
  ref,
  reactive,
  onMounted,
  toValue,
  inject,
  getCurrentInstance
} from "vue";
import {FormInstance, FormRules} from "element-plus";

import {ElMessage, ElMessageBox} from "element-plus";
import lqtableCommon from '../../components/lqtableCommon.js';
import {editKey} from '../../components/keys.js';
import LqTable from '@/pages/components/LqTable.vue'
import MajorHazardMaterialForm from '@/pages/ent/majorHazard/MajorHazardMaterialForm.vue'

const operationCase = inject(editKey);

//================ table =============
const columns = [
  {label: '危险物质名称', prop: 'name', minWidth: 200},
  {label: "危险物质数量", prop: 'materialCount', minWidth: 80},
  {label: '重大危险源级别', prop: 'level', minWidth: 120},
  {label: "申请类型", prop: 'applicationType', minWidth: 250},
  {label: "上报日期", prop: 'submitDate', minWidth: 250},
  {label: "申请状态", prop: 'registerRecResult', minWidth: 100},//status
];

const mhmTableRef = ref();

const mhmTableData = ref({
  records: [],
  // pageSize: 10,
  tableSize: 'default',
  border: true,
});

const loadData = () => {
  console.log(`加载历史申请记录 Info ID: %s  Hazard Code: %s`,
      operationCase.value.hazardInfoId, operationCase.value.hazardCode);

  mhmTableRef.value?.startLoading();
  global.$api.getHistoryRegisterRecords({
    id: operationCase.value.id,
    hazardCode: operationCase.value.hazardCode
  }).then( ({data}) => {
    if (data.status === 'OK') {
      mhmTableRef.value?.stopLoading();
      mhmTableData.value.records = data.data;
    }
  });
}
/*
const flush = () => {
  dialog.value.visible = false;
  loadData();
}*/

onMounted(() => {
  loadData();
})

//================ dialog ============
const historyRegiRecordTableRef = ref()

const dialog = ref({
  visible: false,
  innerAttrs: {
    id: 'historyRegiRecordFormDialog',
    class: 'historyRegiRecordFormDialog',
    title: '查看详情',
    width: "85%",
    top: '1vh'
  },
  events: {
    open: () => {
      console.log('dialog open.....');
      // console.log(toValue(tableData.value));
    },
    close: () => {
      console.log('dialog close.....');
      historyRegiRecordTableRef.value?.handleReset();
    },
  }
})





</script>

<style scoped>

</style>
